<!--白底黑字-->
<template>
  <div class="main-div1">
    <div>
      <Row :gutter="1">
        <Col span="6">
          <Select class="select-custom" v-model="online" placeholder="全部">
            <Option v-for="item in onlineList" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
        </Col>
        <Col span="18">
          <Input id="input-device-search" :style="{background:'rgb(248,245,245)'}" search
                 v-model="srhValue" @on-search="search" placeholder="搜索关键词..." />
        </Col>
      </Row>
    </div>
    <Scroll height="100%">
    <Tree id="custom-device-tree"
          :data="deviceData"
          :load-data="loadData"
          :render="renderContent"
          :select-node="selectNode"
          @on-select-change="changeNode" expand-node ></Tree>
    </scroll>
  </div>
</template>
<script>
import Device from '@/api/Device';
import PoptipBtn from "@/view/Home/map/RelationButton";
import Comera from "@/assets/images/comera0.png";
import {apiResult} from "@/libs/util";
export default {
  name:"GbDeviceTree1",
  components: {PoptipBtn},
  watch:{
    online(){
      this.search();
    },
    deviceData(){
      this.$emit("device-refresh",this.deviceData);
    }
  },
  data(){
    return{
      api: new Device(),
      srhValue: null,
      deviceData: [],
      buttonProps: {
        type: 'primary',
        size: 'small',
      },
      selectNode: false,
      imgSrc:Comera,
      onlineList:[
        {value:0,label:'全部'},{value:1,label:'在线'},{value:-1,label:'离线'}
      ],
      online:0
    }
  },
  methods:{
    orgClick(node, data){
      console.log("orgClick: %o",data);
    },
    devClick(node, data){
      console.log("devClick: %o",data);
    },
    chnOnlineClick(node, data){
      //在线设备
    },
    chnOfflineClick(node, data){
      console.log("chnOfflineClick: %o",data);
    },

    /**
     * 懒加载查询数据
     */
    loadData(item, callback){
      const that = this;
      let param = {id:item.id};
      this.loading = true;
      this.api.findDeviceForOrgTree(param).then(res=>{
        if (!!res){
          //重新刷新有时res没值
          apiResult(res.data,false,result=>{
            callback(that.resoleData(result.data));
            this.$emit("device-refresh",this.deviceData);
          },err=>{
            this.loading = false;
          })
        }
      });
    },

    /**
     * 查询
     */
    search(){
      if (!!this.srhValue || this.online!=0){
        const that=this;
        const param={keyword:this.srhValue,state:this.online};
        this.api.findDeviceByKeyword(param).then(res=>{
          if (!!res){
            apiResult(res.data,false,result=>{
              that.deviceData=result.data;
            })
          }

        });
      }else{
        this.top();
      }
    },

    /**
     * 第一级
     */
    top(){
      const that = this;
      this.api.findDeviceForOrgTree({}).then(res=>{
        //console.log("top().res:%o",res);
        if (!!res){
          apiResult(res.data,false,result=>{
            this.deviceData = that.resoleData(result.data);
          })
        }

      });
    },
    /**
     * 数据转换
     * @param originList  原数据
     */
    resoleData(originList){
      let target = [];
      if (!!originList){
        for(let i in originList){
          let data = new Object();
          data.id=originList[i].id;
          data.title=originList[i].title;
          data.type=originList[i].type;
          if (data.type == "chn"){
            data.online = originList[i].online;
          }

          if (!(originList[i].children == null || originList[i].children==undefined)){
            data.loading=false;
            data.children=[];
          }
          if (!(originList[i].arrt == null || originList[i].arrt==undefined)){
            data.arrt=originList[i].arrt;
          }
          target.push(data);
        }

      }
      return target;
    },
    changeNode(nodes,node){
      /** 这个方法没起作用了*/
      this.$emit('on-select-change', node, node);
    },
    /**
     * Render 渲染
     * 不用了
     **/
    renderContent_back(h, { root, node, data }){
      if (data.type == 'org'){
        /** 机构: 大字体
         *
         <span style="display: 'inline-block',width: '100%'" title=‘鼠标移入时提示’>
         <span>
         <h1 style="color:black">这是设备</h1>
         </span>
         </span>
         *
         * */
        return h('span', {
          style: {display: 'inline-block',width: '100%',fontWeight:'bold'},
          attrs: {title: data.title},
          on:{
            click: () => {this.$emit('on-org-node-click', node, data)}
          }
        }, [
          h('span', [
            h('span',{style: {color:"#141414",fontWeight:'bold'}},data.title)
            /*h('h4',{style: {color:"#083FE7CC"}},data.title)*/
          ])
        ]);
      }else if (data.type == 'dev'){
        /** 点击设备，NVR等 */
        /**
         <span style="display: 'inline-block',width: '100%'">
         <span>
         <h1 style="color:black">这是设备</h1>
         </span>
         </span>
         *
         **/
        return h('span', {
          style: {display: 'inline-block',width: '100%',fontWeight:'bold'},
          attrs: {title: data.title},
          on:{
            click: () => {this.$emit('on-dev-node-click', node, data)}
          }
        }, [
          h('span', [
            h('span',{style: {color:"#141414",fontWeight:'bold'}},data.title)
            /*h('h4',{style: {color:"#083FE7CC"}},data.title)*/
          ])
        ]);
      }else if (data.type == 'chn' && '1' == data.online){

        /** 在线的通道 */
        /**

         <img class="btnBox" :src="imgSrc" :title="播放监控视频" @click=""/>
         <span style="display: 'inline-block',width: '100%'">
           <span style="color:green">{{data.title}}</span>
             <span style="display: 'inline-block',float: 'right',marginRight: '2px',width:'32px'">
             <Button type="default" Title="播放" icon="md-play" size="small" shape="circle" style="margin-right: 1px" @click="on-playbtnclick(node,data)"></Button>
           </span>
         </span>
         */
        /** 在线设备 绿色字体 */

        //弹框
        const popupDiv = h('div',{attrs:{
             class:"ivu-poptip-popper",
             style:"width: 300px; position: absolute; will-change: top, left; top: 366px; left: 188px; display: none;",
             placement:"right"}},[
            h('div', {class:"ivu-poptip-content"},[
              h('div', {class:"ivu-poptip-arrow"},null),
              h('div', {class:"ivu-poptip-inner"},[
                h('div',{class:"ivu-poptip-body"},[
                  h('div',{class:"ivu-poptip-body-content"},[
                    h('div',{class:"poptip-div"},[
                      h('button',{attrs:{type:"button",clas:"btn ivu-btn ivu-btn-info ivu-btn-icon-only",title:"实时视频"}},[
                        h("i",{attrs:{class:"ivu-icon ivu-icon-md-easel"}},null)
                      ]),
                      h('button',{attrs:{type:"button",clas:"btn ivu-btn ivu-btn-info ivu-btn-icon-only",title:"语音对讲"}},[
                        h("i",{attrs:{class:"ivu-icon-md-mic"}},null)
                      ]),
                    ])
                  ])
                ]),
              ]),

            ])
          ]);

        const treeitem=h('div',{class:"vu-poptip"},[
          h('div',{class:"ivu-poptip-rel"},[
            h('span',{class:'chn-tile',attrs: {title: data.title}},[data.title,]),
          ]),
          popupDiv
        ])

        const span1=h('span', {style: {color:"green",fontWeight:'bold'},attrs: {title: data.title}},data.title);
        const contentDiv=h('div',{class:'poptip-div'},
          {
            //content 是命名 slot
            slot:()=>[
              h('Button',{class:"btn",attrs:{icon:'md-easel',title:'实时视频',type:'info'}}),
              h('Button',{class:"btn",attrs:{icon:'md-mi',title:'语音对讲',type:'info'}})
            ]
          });

/*
          h('Button',{class:"btn",attrs:{icon:'md-easel',title:'实时视频',type:'info'}}),
          h('Button',{class:"btn",attrs:{icon:'md-mi',title:'语音对讲',type:'info'}})
*/
          /**
           *  <Button class="btn" icon="md-easel" title="实时视频" type="info"></Button>
           <Button class="btn" icon="md-mic" title="语音对讲" type="info"></Button>
           <Button class="btn" icon="md-git-merge" title="跟踪" type="info"></Button>
           <Button class="btn" icon="md-people" title="附近" type="info"></Button>
           <Button class="btn" icon="md-information" title="设备信息" type="info"></Button> */
        const popuper = h('Poptip',{style:{width:"400"},attrs:{trigger:"hover", placement:"right"}},[
          span1,
          {content:()=>{
              h('Button',{class:"btn",attrs:{icon:'md-easel',title:'实时视频',type:'info'}})
            }}
          ])
        return popuper;
        /*
        return h('Poptip', {trigger:'hover',placement:'right',width:'300'},
        [h('span',{class:'chn-tile',attrs: {title: data.title}},data.title),
         h('div',{class:'poptip-div',slot:"content"},
           [
             h('button',{attrs:{type:'button',class:'btn ivu-btn ivu-btn-info ivu-btn-icon-only',title:"实时视频"}},
               [h("i",{attrs:{class:"ivu-icon ivu-icon-md-easel"}},null)])

           ]
         )
        ]
        );
*/


        /*
        return h('span', {
          style: {display: 'inline-block',width: '150px',fontWeight:'bold'},
          attrs: {title: data.title},
          on:{
            click: () => {this.$emit('on-online-click', node, data)}
          }
        }, [
          h('img',{
            attrs: { src: this.imgSrc,title: '通道' },
            style: {cursor: 'pointer',marginRight: '5px', width:'16px'}
          }),

          h('span', [
            h('span', {style: {color:"green",fontWeight:'bold'},attrs: {title: data.title}},data.title)
          ]),
          h('span', {
            style: {display: 'inline-block',float: 'right',marginRight: '0px',width:'24px',fontWeight:'bold'}
          }, null)
        ]);
        */
      }else{
        /** 点击 其它 */
        return h('span', {
          style: {display: 'inline-block',width: '100%',fontWeight:'bold'},
          attrs: {title: data.title},
          on:{
            click: () => {this.$emit('on-offline-click', node, data)}
          }
        }, [
          h('span', [
            h('span', {style: {color:"#c74646",fontWeight:'bold'}}, data.title)
          ])
        ]);
      }
    },

    /**
     * Render 渲染
     * 新的写法
     **/
    renderContent(h, { root, node, data }){
      if (data.type == 'org') {
        return (
          <span class="org-span" title={data.title}
            onclick={()=>{
              this.$emit('org-node-click', node, data)
            }}
          >{data.title}</span>
        )
      }else if (data.type == 'dev'){
        return (
          <span class="dev-span" title={data.title}
                onclick={()=>{
                  this.$emit('dev-node-click', node, data)
                }}
          >{data.title}</span>
        )
      }else if (data.type == 'chn' && ('1' == data.online || 'true' == data.online)){
        return (
            <Poptip trigger="hover" placement="right" width="240" props={{transfer:true}}>
              <span class="chn-span-online" title={data.title}>{data.title}</span>
              <div class="poptip-div" slot="content">
                <PoptipBtn props={{status:1}}
                           onBtnClick={(event)=>{ //需要这么写，对应的是组件<PoptipBtn> this.$emit('btnClick', event)
                             this.$emit('chn-node-click', event,node, data)
                           }}
                >
                </PoptipBtn>
              </div>
            </Poptip>
        )
      }else{
        return (
          <Poptip trigger="hover" placement="right" width="200" props={{transfer:true}}>
            <span class="chn-span-offline" title={data.title}>{data.title}</span>
            <div class="poptip-div" slot="content">
              <PoptipBtn props={{status:0}}
                         onBtnClick={(event)=>{ //需要这么写，对应的是组件<PoptipBtn> this.$emit('btnClick', event)
                           this.$emit('chn-node-click', event,node, data)
                         }}
              >
              </PoptipBtn>
            </div>
          </Poptip>
        )
      }
    },
    poptipBtnClick(event){
      console.log(event);
    }
  },
  mounted() {
    //this.search();
    this.top();
  }
}

</script>

<style lang="less">
//@import "./topnav";
.main-div1 {
  //position: relative;
  /*  width: 100%;
    height: 100%;*/
  margin-bottom: 5px;
  margin-top: 5px;
  margin-left: 5px;
  margin-right: 5px;
  background: #001529;
}
.chn-tile{
  display:inline-block;
  width:150px;
  fontWeight:'bold';
}

.poptip-div{
  //background-color: #0c0c0c;
  margin-left: 0px;
  display: block;
  .btn{
    margin-left: 5px;
  }
}
.org-span{
  display: inline-block;
  width: 100%;
  font-Weight:bold;
  color: #000000;
}
.dev-span{
  display: inline-block;
  width: 100%;
  font-Weight:bold;
  color: #122e87;
}
.chn-span-online{
  display: inline-block;
  width: 100%;
  font-Weight:bold;
  color: green;
}
.chn-span-offline{
  display: inline-block;
  width: 100%;
  font-Weight:bold;
  color: #5c6b77;
}


</style>

<style lang="less" scoped>
.select-custom{
  width: 100%;
  height: 100%;
  background-color: #001529;
  color:#e0e0e0;
  /*清除select的边框样式*/
  border: none;
  /*清除select聚焦时候的边框颜色*/
  outline: none;
}
.ivu-icon{
  color: #2d8cf0  !important;
}
.ivu-poptip-popper[x-placement^="right"] {
  padding: 0 7px 0 10px;
}


#input-device-search /deep/ .ivu-input{
  border: 1px solid #244980;
  color: #515a6e ;
  background-color: #001529 ;
}

.ivu-select-dropdown {
  background-color: #051f70ff;
}
.ivu-select-item {
  color: rgba(240, 241, 246, 0.87);
}

.ivu-select-selection {
  background-color: #051f70ff;
}

.ivu-select-item-selected, .ivu-select-item-selected:hover {
  color: #2d8cf0;
}

#custom-device-tree .ul .li:hover{
  color: #78aee4;
}
</style>
